import React, {Component} from 'react';
import {connect} from 'dva';
import {Breadcrumb, Table} from 'antd';
import Link from 'umi/link';
import router from 'umi/router';

class BooksManagerPage extends Component {
  state = {
    page: 1,

  };

  componentDidMount() {
      this.props.dispatch({
          type: 'books/GetBooksByCategory',
          payload: {
            category: this.props.query.category_id
          }
      });
  }

  columns = [
    {
      title: '名称',
      dataIndex: 'name',
      render: (text, record, index) => {
        return (<>
          <a
            onClick={() => {
              router.push({
                pathname: '/book_manager/books',
                query: {
                  category_id: record._id
                },
              })
            }}>{text}</a>
        </>)
      }
    },
    {
      title: '操作',
      dataIndex: 'opt',
      render: (text, record, index) => {
        return (
          "dafdfad" + index + record
        )
      }
    }
  ];

  render() {
    const {query, book_list} = this.props;
    return (
      <div>
        <Breadcrumb>
          <Breadcrumb.Item><Link to={"/book_manager/category"}>{query.category_id || ''}</Link></Breadcrumb.Item>
          {/*<Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>*/}
          {/*<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>*/}
          {/*<Breadcrumb.Item>An Application</Breadcrumb.Item>*/}
        </Breadcrumb>,
        <h1>图书管理</h1>
        {/*<Table columns={this.columns} bordered={true} dataSource={categoryList} loading={cardsLoading} rowKey="name"/>*/}
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log('BooksManagerPage state');
  return {
    book_list: state.books.book_list,
    cardsLoading: false,
    query: state.routing.location.query || {}
  };
}

export default connect(mapStateToProps)(BooksManagerPage);
